<template>
	<view class="login-container bg-f" style="height: 100vh;position: relative;">
		<view class="" style="height: 175px;width: 100%;">
			<img src="../../static/logo/gouhuo.png">
		</view>
		<view class="bg-f"
			:style="`height:${height-175}px;width:100%;margin-top:-27px;position: absolute;border-radius: 30px 30px 0px 0px;`"
			style="box-sizing: border-box;padding: 0px 20px;">
			<view class="" style="margin-top: 40px;">
				<view class=""
					style="margin-bottom: 13px;font-size: 14px;font-weight: 500;font-family: auto;color: #BBBBBB;">
					账号
				</view>
				<view class="flex-align" style="height: 51px;background: #F2F2F4; border-radius: 10px;">
					<input type="number" v-model="username"
						style="outline:none;border:0px;background: #F2F2F4;padding-left: 10px;width:100%"
						placeholder="请输入账号(数字)" />
				</view>
			</view>
			<view class="" style="margin-top: 30px;">
				<view class=""
					style="margin-bottom: 13px;font-size: 14px;font-weight: 500;font-family: auto;color: #BBBBBB;">
					密码
				</view>
				<view class="flex-space flex-c" style="height: 51px;background: #F2F2F4; border-radius: 10px;">
					<!-- :type="eaey==true ? 'password' : 'text'" -->
					<input :type="pass" v-model="passwords"
						style="outline:none;border:0px;background: #F2F2F4;padding-left: 10px;width:100%"
						placeholder="请输入密码" />
					<span id="" @click="easy">
						<img style="width: 21px;height:13px;margin-right: 20px;" src="../../static/invisible2x.png"
							v-if="eaey">
						<img style="width: 21px;height:13px;margin-right: 20px;" src="../../static/so2x.png" v-else>
					</span>
				</view>
			</view>
			<view class="flex-xycenter" style="width: 100%;">
				<view class="flex-xycenter" style="margin-top: 22px;font-size: 16px;font-weight: bold;width: 80%;font-family: auto;color: #FFFFFF;background: #0580FF;padding: 11px  0px;
	      border-radius: 10px;" @click="handleLogin">
					登录账户
				</view>
			</view>
			<view class="flex-xycenter" style="width: 100%;">
				<view class="flex-xycenter" style="margin-top: 22px;font-size: 16px;font-weight: bold;width: 80%;font-family: auto;color: #FFFFFF;background: #0580FF;padding: 11px  0px;
			border-radius: 10px;" @click="handleinsert">
					注册账户
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				height: 500,
				username: '',
				passwords: '',
				pass: 'password',
				eaey: true,

			}
		},
		mounted() {
			this.client() //获取高度
		},
		onShow() {

		},
		methods: {

			easy() {
				this.eaey = !this.eaey;
				if (this.eaey) {
					this.pass = 'password'
				} else {
					this.pass = 'text'
				}
			},
			client() {
				this.$nextTick(() => {
					this.height = document.body.clientHeight
				})
			},
			// 登录
			handleLogin() {
				uni.switchTab({
					url: '../index/index'
				})
				// if (this.username && this.passwords) {
				// 	console.log('erferw')
				// 	uni.redirectTo({
				// 		url: '../index/index'
				// 	})
				// } else {
				// 	uni.showToast({
				// 		title: '请检查账号密码是否输入',
				// 		icon: 'none'
				// 	})
				// }
			},
			// 注册
			handleinsert() {
				uni.navigateTo({
					url: '../insert/insert'
				})
			}
		}
	}
</script>
<style lang="scss">
	/* 修复input 背景不协调 和光标变色 */
	/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
	// 背景改白色
	$bg: #fff;
	$light_gray: #fff;
	$cursor: #fff;
</style>
<style lang="scss" scoped>
	// 背景改白色
	$bg: #f7f8fa;
	$dark_gray: #889aa4;
	$light_gray: #eee;

	.bg-f {
		border-radius: 5px;
		background-color: #FFFFFF;
	}

	.login-container {
		box-sizing: border-box;
		overflow: hidden;
	}
</style>
